<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>论坛</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">


    <link rel="shortcut icon" href="favicon.ico">
    <link href="layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/global.css">
    <!-- Fonts START -->
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="assets/plugins/owl.carousel/assets/owl.carousel.css" rel="stylesheet">
    <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->
    <!-- Theme styles START -->
    <link href="assets/pages/css/components.css" rel="stylesheet">
    <link href="assets/corporate/css/style.css" rel="stylesheet">
    <link href="assets/pages/css/style-shop.css" rel="stylesheet" type="text/css">
    <link href="assets/corporate/css/style-responsive.css" rel="stylesheet">
    <link href="assets/corporate/css/themes/red.css" rel="stylesheet" id="style-color">
    <link href="assets/corporate/css/custom.css" rel="stylesheet">
    <!-- Theme styles END -->


    <link rel="stylesheet" href="kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
    <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id');
        });
    </script>
    <script>
        KindEditor.ready(function(K) {
            K.create('textarea[name="note"]', {
                uploadJson : 'kindeditor/jsp/upload_json.jsp',
                fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',
                allowFileManager : true,
                allowImageUpload : true,
                autoHeightMode : true,
                afterCreate : function() {this.loadPlugin('autoheight');},
                afterBlur : function(){ this.sync(); }  //Kindeditor下获取文本框信息
            });
        });
    </script>

</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body class="ecommerce" style="margin: 0px;">
<!-- BEGIN STYLE CUSTOMIZER -->
<div class="color-panel hidden-sm">
    <div class="color-mode-icons icon-color"></div>
    <div class="color-mode-icons icon-color-close"></div>
    <div class="color-mode">
        <p>THEME COLOR</p>
        <ul class="inline">
            <li class="color-red current color-default" data-style="red"></li>
            <li class="color-blue" data-style="blue"></li>
            <li class="color-green" data-style="green"></li>
            <li class="color-orange" data-style="orange"></li>
            <li class="color-gray" data-style="gray"></li>
            <li class="color-turquoise" data-style="turquoise"></li>
        </ul>
    </div>
</div>
<!-- END BEGIN STYLE CUSTOMIZER -->

<!-- BEGIN TOP BAR -->
<div class="pre-header" id="loginiframe">
</div>
<!-- END TOP BAR -->

<!-- BEGIN HEADER -->
<div class="header">
    <div class="container" id="headeriframe">
        <!-- BEGIN chat -->
        <!--END chat -->
        <!-- BEGIN NAVIGATION -->
        <!-- END NAVIGATION -->
    </div>
</div>
<!-- Header END -->

<div class="main">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="index.html">首页</a></li>
            <li class="active">论坛</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40" id="app">
            <!-- BEGIN SIDEBAR -->
            <!-- END SIDEBAR -->

            <!-- BEGIN CONTENT -->
            <div class="col-md-12 col-sm-9">

                <div class="content-page">




                    <!--论坛-->
                    <div style="padding:0px 30px;">

                        <div class="layui-container" style="border: 1px solid #B8B8B8;width: auto;">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md12">

                                    <div class="fly-panel" style="margin-bottom: 0;">

                                        <div class="fly-panel-title fly-filter" style="font-weight: bold">
                                            <a href="articlelist.html">全部</a>
                                            <template v-for="(section,i) in sectionlist">
                                                <span class="fly-mid"></span>
                                                <a :href="['articlelist.html?categoryid='+section.id]"
                                                   :style="categoryid == section.id?'border-bottom: 2px solid #0BAC4F':''"
                                                   class="layui-this">{{section.name}}</a>
                                            </template>
                                        </div>

                                        <ul class="fly-list">
                                            <li v-for="(article,i) in articlelist" style="height: auto;">
                                                <a href="" class="fly-avatar">
                                                    <img :src="['upload/'+article.member.filename]"
                                                         alt="article.member.tname">
                                                </a>
                                                <h2 style="margin-bottom: 0px;">
                                                    <a class="layui-badge"
                                                       style="top:0px;height: 18px;">{{article.section.name}}</a>
                                                    <a :href="['articledetails.html?id='+article.id]">{{article.title }}</a>
                                                </h2>
                                                <div class="fly-list-info">
                                                    <a href="#" link>
                                                        <cite>{{article.member.tname}}</cite>
                                                        <i class="iconfont icon-renzheng" title="实名认证"></i>
                                                        <!--
                                                        <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
                                                        <i class="layui-badge fly-badge-vip">VIP3</i>
                                                        -->
                                                    </a>
                                                    <span>{{article.savetime}}</span>

                                                    <!--<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>
                                                    <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>-->
                                                    <span class="fly-list-nums">
                                                     <i class="iconfont icon-pinglun1" title="跟帖"></i>{{article.replylist.length}}
                                             </span>
                                                </div>
                                                <div class="fly-list-badge">
                                                <span v-if="article.isjh=='yes'"
                                                      class="layui-badge layui-bg-red">精帖</span>
                                                </div>
                                            </li>
                                        </ul>
                                        <div id="demo1" style="text-align: center"></div>

                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="layui-container" style="border: 1px solid #B8B8B8;margin-top: 20px;width: auto;">
                            <div style="background: #E3E3E3;color:#0BAC4F;font-weight: bold;padding: 10px 10px;border-bottom: 1px solid #B8B8B8;">
                                快速发帖
                            </div>
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md8" style="padding: 20px 50px;">

                                    <form class="layui-form">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">标题</label>
                                            <div class="layui-input-block">
                                                <input type="text" v-model="title" placeholder="请输入标题" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">版块</label>
                                            <div class="layui-input-block">
                                                <select v-model="sectionid" id="sectionid">
                                                    <option value="">请选择版块</option>
                                                    <option v-for="section in sectionlist" :value="section.id">
                                                        {{section.name}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-form-text">
                                            <label class="layui-form-label">内容</label>
                                            <div class="layui-input-block">
                                    <textarea name="content" id="editor_id" placeholder="请输入内容" style="width: 100%"
                                              class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <a class="layui-btn" lay-submit lay-filter="formDemo"
                                                   @click="add()" style="color:white;">立即提交</a>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>

                    </div>


                    <!--论坛-->







                </div>
            </div>
            <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
    </div>
</div>

<!-- BEGIN BRANDS -->
<!-- END BRANDS -->

<!-- BEGIN STEPS -->
<!-- END STEPS -->

<!-- BEGIN PRE-FOOTER -->
<!-- END PRE-FOOTER -->

<!-- BEGIN FOOTER -->
<div class="footer" id="footiframe">
</div>
<!-- END FOOTER -->

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/corporate/scripts/back-to-top.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
<script src="assets/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->
<script src='assets/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script><!-- product zoom -->
<script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script><!-- Quantity -->
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="assets/pages/scripts/contact-us.js" type="text/javascript"></script>

<script src="assets/corporate/scripts/layout.js" type="text/javascript"></script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">

    var qs = Qs
    var categoryid = UrlParam.paramValues("categoryid")==undefined?"":UrlParam.paramValues("categoryid").toString();
    var vmm = new Vue({
        el:"#app",
        data:{
            categoryid:categoryid,
            title:"",
            sectionid:"",
            content:"",
            sectionlist:[],
            articlelist:[],
            keyword:"",
            pageSize:10,
        },
        mounted(){
            this.getsectionlist()
            this.getarticlelist()
            layui.use(['form'], function(){
                var form = layui.form
            })
            sessionStorage.setItem("signoutShow","articlelist")
        },
        methods:{

            add(){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        this.sectionid = $("#sectionid").val()
                        this.content = window.editor.html()


                        if(this.title==""){
                            layer.msg("标题不能为空",{icon:5})
                            return false;
                        }


                        if(this.sectionid==""){
                            layer.msg("请选择版块",{icon:5})
                            return false;
                        }


                        if(this.content==""){
                            layer.msg("发表内容不能为空",{icon:5})
                            return false;
                        }


                        axios.post('articleAdd',qs.stringify({
                            title:this.title,
                            sectionid:this.sectionid,
                            content:this.content,
                        })).then(response =>{
                            layer.msg("发表成功",{icon:6})
                            this.getarticlelist()
                        }).catch(error =>{
                            console.log(error)
                        })

                    }else{
                        location.replace("login.html")
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },


            getarticlelist() {
                axios.post('admin/articleList',qs.stringify({
                    sectionid:this.categoryid,
                    pageSize:this.pageSize
                })).then(response =>{
                    layui.use(['laypage', 'layer'], function(){
                        var laypage = layui.laypage
                            ,layer = layui.layer;
                        //总页数大于页码总数
                        laypage.render({
                            elem: 'demo1'
                            ,limit:vmm.pageSize
                            ,count: response.data.list.length //数据总数
                            ,jump: function(obj,first){
                                vmm.current_page(obj.curr,vmm.pageSize)
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            }
                        });
                    });
                }).catch(error =>{
                    console.log(error)
                })
            },

            current_page(page,pageSize){
                axios.post('admin/articleList',qs.stringify({
                    sectionid:this.categoryid,
                    pageNum:page,
                    pageSize:pageSize,
                })).then(response =>{
                    this.articlelist = response.data.pageInfo.list
                    console.log(this.articlelist)
                }).catch(error =>{
                    console.log(error)
                })
            },



            getsectionlist(){
                axios.post('admin/sectionList',qs.stringify({
                })).then(response =>{
                    this.sectionlist = response.data.list
                }).catch(error =>{
                    console.log(error)
                })
            },

        }
    })

</script>

<script type="text/javascript">
    window.onload=function(){
        $("#loginiframe").load("iframe/loginiframe.html")
        $("#headeriframe").load("iframe/headeriframe.html")
        $("#footiframe").load("iframe/footiframe.html")

    }
</script>
<!-- END BODY -->
</html>